<template>
  <div class="category">
    <!-- 1.0 头部导航结构 -->
    <van-nav-bar title="栏目管理" left-arrow @click-left="$router.back()">
    </van-nav-bar>
    <!-- 2.0 已关注的栏目 -->
    <div class="group follow">
      <h3 class="title">已关注栏目</h3>
      <p class="desc">点击删除以下频道</p>
      <div class="list">
        <span
          v-for="item in followList"
          :key="item.id"
          class="item"
          @click="removeFo(item)"
          >{{ item.name }}</span
        >
      </div>
    </div>

    <div class="group unfollow">
      <h3 class="title">未关注栏目</h3>
      <p class="desc">点击添加以下频道</p>
      <div class="list">
        <span
          v-for="item in unfollowList"
          :key="item.id"
          class="item"
          @click="addFn(item)"
          >{{ item.name }}</span
        >
      </div>
    </div>
  </div>
</template>
<script>
import { getCategoryAPI } from "../apis/category";
import {
  getCate,
  getToken,
  getunCate,
  setCate,
  setUnCate,
} from "../utils/localData";
export default {
  data() {
    return {
      // 已关注的栏目
      followList: getCate(),
      // 未关注的栏目
      unfollowList: getunCate(),
    };
  },
  async created() {
    // 如果本地存储两个数组都为空，表示从未请求过数据，需要发送请求获取栏目数据
    if (this.followList.length === 0 && this.unfollowList.length === 0) {
      const res = await getCategoryAPI();
      // console.log(res.data.data);
      // 如果已登录，需要删除掉前两项(关注和头条)
      if (getToken()) {
        // .splice()   可以用于删除数组的数据，改变原数组
        // 💥 注意：.splice() 的返回值是 被删除的元素。
        res.data.data.splice(0, 2);
      } else {
        // 如果未登录，需要删除掉前一项(头条)
        res.data.data.splice(0, 1);
      }
      // console.log(res.data.data);
      // 把操作后的数组存储起来，用于页面渲染
      this.followList = res.data.data;
    }
  },

  methods: {
    removeFo(theItem) {
      if (this.followList.length === 1)
        return this.$toast.fail("至少保存一个栏目");
      // console.log(theItem);
      this.followList = this.followList.filter(
        (item) => item.id !== theItem.id
      );
      this.unfollowList.unshift(theItem);
    },
    addFn(theItem) {
      this.unfollowList = this.unfollowList.filter(
        (item) => item.id !== theItem.id
      );
      this.followList.unshift(theItem);
    },
  },
  watch: {
    followList() {
      setCate(this.followList);
      setUnCate(this.unfollowList);
    },
  },
};
</script>

<style lang="less" scoped>
.group {
  padding: 10px;
  .title {
    font-size: 15px;
    margin: 10px 0;
  }

  .desc {
    font-size: 12px;
    color: #999;
    margin: 5px 0;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      height: 35px;
      width: 23%;
      margin: 1%;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      position: relative;
      &::after {
        position: absolute;
        right: 5px;
        top: 0px;
      }
    }
  }
}
.follow .list .item::after {
  content: "-";
}
.unfollow .list .item::after {
  content: "+";
}
</style>